.index-box {
  position: relative;
  width: 640px;
  height: 1136px;
  background: url("../img/bg.jpg") no-repeat 0 0;
  .share-btn {
    position: absolute;
    right: 32px;
    top: 32px;
    width: 72px;
    height: 72px;
    z-index: 100;
    background: url("../img/icon.share.png") no-repeat 0 0;
  }
  .go-page-one {
    position: absolute;
    left: 0;
    bottom: 36px;
    width: 350px;
    height: 244px;
    background: url("../img/page.one.btn.png") no-repeat 0 0;
  }
  .go-page-two {
    position: absolute;
    right: 0;
    bottom: 344px;
    width: 350px;
    height: 244px;
    background: url("../img/page.two.btn.png") no-repeat 0 0;
  }
}

.result-box {
  &.result-box2 {
    background: url("../img/icon.fly2.png") no-repeat bottom left;
  }
  padding: 12px 24px 24px 24px;
  //background: url("../img/icon.fly.png") no-repeat bottom left;
  .result-list {
    overflow: hidden;
    >li {
      &:first-child {
        margin-top: 24px;
      }
      width: 584px;
      padding: 4px;
      margin-top: 40px;
      background-color: #FFF;
      border-radius: 8px;
      .item-content {
        position: relative;
        width: 100%;
        border-radius: 10px;
        overflow: hidden;
        display: block;
        .icon-no {
          position: absolute;
          left: 0;
          top: 0;
          width: 94px;
          height: 94px;
          color: #FFF;
          font-size: 24px;
          z-index: 100;
          background: url("../img/no.bg.png") no-repeat 0 0;
          >span {
            margin-top: 25px;
            margin-left: 0;
            display: inline-block;
            -webkit-transform:rotate(-45deg);
          }
        }
        .icon-heart {
          position: absolute;
          left: 0;
          top: 0;
          width: 182px;
          height: 182px;
          color: #FFF;
          padding-left: 15px;
          font-size: 24px;
          z-index: 200;
          background: url("../img/icon.redheart.png") no-repeat 0 0;
          >span {
            margin-top: 60px;
            padding-left: 40px;
            margin-left: 6px;
            line-height: 40px;
            font-size: 28px;
            &.icon-zan {
              z-index: 300;
              background: url("../img/zan.png") no-repeat 0 center;
            }
            &.icon-zan-u {
              background: url("../img/zan.u.png") no-repeat 0 center;
            }
            display: inline-block;
            -webkit-transform:rotate(-45deg);
          }
        }
        .icon-tag {
          position: absolute;
          right: 16px;
          top: 16px;
          width: 110px;
          height: 36px;
          line-height: 36px;
          color: #FFF;
          font-size: 20px;
          z-index: 200;
          text-align: center;
          background: url("../img/icon.tag.png") no-repeat 0 0;
          span {
            display: inline-block;
          }
        }
        .avatar-wrapper {
          position: absolute;
          right: 17px;
          bottom: 48px;
          width: 98px;
          height: 98px;
          z-index: 500;
          img {
            border: 2px solid #FFF;
            width: 94px;
            height: 94px;
            border-radius: 48px;
          }
        }
        .img-wrapper {
          width: 100%;
          position: relative;
          img {
            width: 100%;
            height: 324px;
          }
          .img-info {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 93px;
            padding: 53px 0 26px;
            background: url("../img/icon.mask.png") no-repeat left bottom;
            .theme {
              line-height: 60px;
              height: 60px;
              overflow: hidden;
              .tit {
                display: inline-block;
                font-size: 28px;
                color: #FFF;
                margin-left: 16px;
                max-width: 444px;
              }
              .status {
                vertical-align: middle;
                display: inline-block;
                margin: 0 10px;
                line-height: 30px;
                color: #ff8001;
                font-size: 20px;
                padding: 0 10px;
                background: #FFF;
                border-radius: 20px;
                vertical-align: top;
                margin-top: 15px;
              }
            }
            .detail-list {
              overflow: hidden;
              >li {
                float: left;
                line-height: 32px;
                height: 32px;
                overflow: hidden;
                font-size: 24px;
                color: #FFF;
                padding-right: 16px;
                padding-left: 16px;
                border-right: 2px solid #FFF;
                &:first-child {
                  max-width: 40%;
                }
                &:last-child {
                  border-right: 0 none;
                }
              }
            }
          }
        }
        .text-wrapper {
          padding: 18px 136px 18px 16px;
          p {
            height: 60px;
            line-height: 30px;
            color: #666;
            font-size: 24px;
            overflow: hidden;
          }
        }
      }
      &.no-result {
        background: transparent;
        font-size: 30px;
        text-align: center;
        line-height: 40px;
        color:#666;
      }
    }
  }
}